<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .divList {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            overflow: auto;
        }

        .item {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>

    <!-- 
        9个比较常用的按键修饰符
            .enter
            .tab（必须配合keydown事件使用，keyup事件无效）
            .delete（捕获“删除”和“退格”键）
            .esc
            .space
            .up
            .down
            .left
            .right
        怎么获取某个键的案件修饰符
            第一步：通过event.key获取这个键的真实名字
            第二步：将这个真实名字按照kebab-case风格进行命名
                PageDown是真实的名字，经过命名后，按键修饰符的名字为：page-down
        案件修饰符是可以自定义的？
            通过Vue的全局配置对象config来进行案件修饰符的自定义
            语法规则：
                Vue.config.keyCodes.案件修饰符的名字 = 键值
        系统修饰符：4个比较特殊的键
            ctrl、alt、shift、meta（开始键）
            以ctrl举例（其他3个一样）：
                对于keydown事件来说：只要按下ctrl键，keydown事件就会触发
                对于keyup事件来说：需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，keyup事件才触发

    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        回车键：<input type="text" @keyup.enter="getInfo" /> <br />
        回车键（键值）：<input type="text" @keyup.13="getInfo" /> <br />
        delete键（两个都可以）<input type="text" @keyup.delete="getInfo" /> <br />
        tab键（keyup无法触发）<input type="text" @keyup.enter="getInfo" /> <br />
        tab键（keydown才可触发）<input type="text" @keydown.enter="getInfo" /> <br />
        PageDown<input type="text" @keyup.page-down="getInfo" /> <br />
        huiche<input type="text" @keyup.huiche="getInfo" /> <br />
        ctrl键（keydown）<input type="text" @keydown.crtl="getInfo" /> <br />
        ctrl键（keyup）<input type="text" @keyup.crtl.i="getInfo" />
        <!-- 当按下 ctrl + i 并松开键时，会获得 i 的值（因为此处指定了 i 键，@keyup.crtl 可以识别其他键） --><br />
    </div>

    <script>

        //自定义键值, .huiche => 表示回车键 enter
        Vue.config.keyCodes.huiche = 13

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '按键修饰符'
            },
            methods: {
                getInfo(event) {
                    console.log(event.target.value);

                }
            }
        })

    </script>


</body>


</html>